<template>
  <div
    class="authentication-box"
    v-if="UserStore.userInfo.info && route.meta.title == '首页' && UserStore.userInfo.info.type == 0"
  >
    <a href="http://t-workbench.jiyi.show/#/dashboard/base" target="_blank" class="authClass">
      <span>前往工作台，立即认证</span>
      <img :src="publicUrls + 'door/footerIcon.png'" alt="" />
    </a>
  </div> 
  <div class="footer-box">
    <div class="footer-box-content">
      <img
        :src="'//static.jiyi.show/door/footerLogo.png' + '?imageView2/2/w/136/h/47/format/webp'"
        alt=""
        class="footer-logo"
      /> 
      <div class="footer-box-content-left">
        <div class="footer-top-right">   
          <router-link :to="{path:item.value}" v-for="item in tabList" :key="item.id" class="link-class">
            {{ item.name }}
            <span class="solid"></span>
          </router-link>
        </div>
        <div class="footer-bottom-title1">
          广州犹新记忆科技有限公司 · ©{{ currentYear }} 记忆网-永不落幕的展览展示与交流平台
        </div>
        <div class="footer-bottom">
          <a class="footer-bottom-title2" href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2023109199号-1</a>
          <a
            class="footer-bottom-link footer-bottom-title2"
            href="https://beian.mps.gov.cn/#/query/webSearch?code=42018502007005"
            target="_blank"
          >
            <img class="icon-img" :src="publicUrls + '/door/gongan.png'" alt="" />
            <span>公网安备42018502007005</span></a
          >
          <a href="https://www.12377.cn/" target="_blank" class="footer-bottom-link footer-bottom-title2">
            <img class="icon-img" :src="publicUrls + '/door/homeIcon2.png'" alt="" />
            <span>违法和不良信息举报中心</span>
          </a> 
          <!-- <span ></span> -->
          <!-- <span class="footer-bottom-title3">联系方式：support@youxinjiyi.com </span> -->
        </div>
      </div>
      <div class="footer-box-content-right">
        <div class="footer-box-content-right-title">
          <img src="//static.jiyi.show/door/contact.png" alt="" />
          <a href="https://work.weixin.qq.com/kfid/kfc4549926862f80760" target="_blank"
            >在线客服
            <span class="shadow"></span>
          </a>
        </div>
        <div class="footer-box-content-right-title">
          <img src="//static.jiyi.show/door/footerEmail.png" alt="" />
          <span>support@youxinjiyi.com</span>
        </div>
        <div class="footer-box-content-right-title">
          <img src="//static.jiyi.show/door/footerPhone.png" alt="" />
          <span>027-87010688</span>
        </div>
        <div class="footer-box-content-right-title2">
          <span>客服中心</span>
          <span style="margin-left: 8px">TIME：9:30-17:30</span>
        </div>
      </div>
    </div>
    <!-- <div class="footer-top">  
      
      <div class="footer-top-right ">
        <router-link :to="item.value" v-for="item in tabList" :key="item.id" class="link-class">
          {{ item.name }}
          <span class="solid"></span>
        </router-link>
        
      </div>
    </div>
    <div class="center-box"></div>
    <div class="footer-bottom hw-box-style-flex hw-box-style-flex-r-center">
      <div class="footer-bottom-title footer-bottom-title1">
        鄂ICP备2023002575号-1·Copyright©2022武汉犹新记忆科技有限公司·All Rights Reserved
      </div>
      
      <div class="footer-bottom-title footer-bottom-title3">
        <img class="icon-img" src="/door/gongan.png" alt="" />
        <span>鄂公安网备44010402000447</span>
        <img class="icon-img icon-img-mg" src="/door/homeIcon2.png" alt="" />
        违法和不良信息举报中心
      </div>
    </div> -->
  </div>
</template>
 
<script setup lang="ts">
// @ts-nocheck
import { publicUrls } from '@/utils/minxin';
import { tabList } from './data';
import { useRouter, useRoute } from 'vue-router';
let currentDate = new Date();
let currentYear = currentDate.getFullYear();
const route = useRoute(); 
const router = useRouter();
const tabList: any = [
  {
    id: 0,
    name: '首页', 
    value: '/',
  }, 
  {  
    id: 1,
    name: '看展览', 
    value: '/exhibitions',
  },
  {
    id: 2,
    name: '逛展品',
    value: '/exhibits',
  },
  {
    id: 3,
    name: '模板广场',
    value: '/squares',
  },
  {
    id: 4,
    name: '关于我们',
    value: '/about',
  },
  {
    id: 4, 
    name: '会员',
    value: '/member',
  },
];
const pathPage = (pathUrl: string) => {
  router.push({ path: pathUrl });
};
</script>   
  
<style lang="less" scoped>
.footer-box {
  position: relative;
  z-index: 996;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 1440px;
  padding: 54px 0;
  background: #141414;
}

.icon-img {
  width: 24px;
  height: 24px;
  margin-right: 2px;
}
// .footer-bottom-title1 {
//   font-size: 16px;
//   font-weight: 400;
//   color: #ffffff;
//   line-height: 24px;
// }
.center-box {
  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
  height: 1px;
  width: 100%;
}
.link-class {
  position: relative;
  .solid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0px;
    height: 1.5px;
    background: #fff;
    transition: all 0.3s;
  }
}
.link-class:hover {
  position: relative;
  .solid {
    width: 100%;
  }
}
.icon-img-mg {
  margin-left: 16px;
}
.authentication-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 64px;
  padding: 0 60px;
  background: @door-theme-color;
  span {
    cursor: pointer;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 28px;
  }
  img {
    cursor: pointer;
    width: 24px;
    height: 24px;
    margin-left: 12px;
  }
}
.authClass {
  display: flex;
  align-items: center;
}
.footer-box-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 1320px;
  width: 80%;
  .footer-logo {
    width: 136px;
    height: auto;
    // height: 56px;
  }
  .footer-box-content-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 80px;
  }
  .footer-box-content-right {
    width: 243px;
    display: flex;
    flex-direction: column;
  }
}

.footer-box-content-right-title {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  img {
    width: 24px;
    height: 24px;
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 24px;
    margin-left: 8px;
  }
  a {
    display: flex;
    position: relative;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 24px;
    margin-left: 8px;
    .shadow {
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0%;
      height: 2px;
      background: #ffffff;
      margin: 0;
      transition: all 0.3s;
    }
  }
  a:hover {
    .shadow {
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      border-radius: 1px;
      background: #ffffff;
      margin: 0;
    }
  }
}

.footer-box-content-right-title2 {
  margin-top: 4px;
  padding-left: 32px;
  span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.38);
    line-height: 22px;
  }
}
.footer-top-right {
  display: flex;

  a {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    line-height: 24px;
    margin-right: 48px;
  }
}

.footer-bottom-title1 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
  line-height: 22px;
  margin-top: 16px;
  margin-bottom: 8px;
}
.footer-bottom {
  display: flex;
  align-items: center;
  display: flex;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
  line-height: 22px;
}
.footer-bottom-link {
  display: flex;
  align-items: center;
  margin-left: 8px;
  img {
    width: 22px;
    height: 22px;
  }
}
.footer-bottom-title2 {
}
.footer-bottom-title3 {
  margin-left: 24px;
}
</style>